<template>
  <div>

    <el-table style="width: 100%" :data="shoptypedata">
      <el-table-column prop="shoptypeid" label="编号" width="550"></el-table-column>
      <el-table-column prop="shoptypename" label="分类名" width="550"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗-->
    <el-dialog title="商品分类编辑" :visible.sync="dialogFormVisible" :append-to-body="true">
      <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
      <el-form>
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="shoptype.shoptypename" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <!-- 设置触发更新的方法 -->
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  var _this;
  export default {
    created() {
      _this = this;

    },
    props: {
      //子组件中设置一个必传参数,父组件中通过属性操作v-bind传过来
      shoptypedata: {
        type: Array,
        required: true
      }
    },
    methods: {

      update(){
        var shoptypename=_this.$axios.post("/shoptype/checkname",{"shoptypename":this.shoptype.shoptypename});
        _this.$axios.all([shoptypename])
        .then(
          _this.$axios.spread(function(param){
            if(param.data=="error"&&_this.shoptyperold.shoptypename!=_this.shoptype.shoptypename){
              alert("分类名不能重复");
              _this.flag = false;
            }
            if(_this.flag){
              _this.$axios.post(
                "/shoptype/update",
                {
                  "shoptypeid":_this.shoptype.shoptypeid,
                  "shoptypename":_this.shoptype.shoptypename

                }
              )
              .then(function(param){
                location.reload() //刷新当前页面
              })
              .catch(function(err) {
              	console.log(err)
              });
            }
            _this.shoptype.shoptypename=""
            //_this.shoptype.shoptypid=""

            _this.shoptyperold.shoptypename="",
            _this.shoptyperold.shoptypid=""

            _this.dialogFormVisible = false;
            _this.flag=true;
          })
          )
          .catch(function(error) {
          	console.log(error);
          })
      },
      handleEdit( row) {
        console.log(row);
        this.shoptype.shoptypeid=row.shoptypeid;
        this.shoptype.shoptypename=row.shoptypename;

        this.shoptyperold.shoptypeid=row.shoptypeid;
        this.shoptyperold.shoptypename=row.shoptypename;
        //   设置点击按钮之后进行显示对话框
        this.dialogFormVisible = true;
      },
      handleDelete(row) {
        console.log(row);
        _this.$axios.post(
          "/shoptype/delete",
          {
           "shoptypeid":row.shoptypeid
          }
        )
        .then(function(param){
          console.log(param.data);
          if(param.data=="ok"){
            alert("删除成功")
            location.reload() //刷新当前页面
          }
        })
        .catch(function(err){
        	console.log(err)
        })
      },
      showUp() {
        //   设置点击按钮之后进行显示对话框
        this.dialogFormVisible = true;
      },
      clear(){
        this.shoptype.shoptypename="";
      },
      cancel() {
        this.shoptype.shoptypename="",
        // 取消的时候直接设置对话框不可见即可
        this.dialogFormVisible = false;
      }
    },
    data() {
      return {

        dialogFormVisible: false,
        addupd: false,
        formLabelWidth: "100px",
        shoptype:{
          shoptypeid:"",
          shoptypename: ""
        },
        shoptyperold:{
          shoptypeid:"",
          shoptypename: ""
        },
        flag: true
      }
    }
  }
</script>

<style>
</style>
